import React,{useState} from "react";
import * as Public from "../publicComponents/index"
import "./linkCommon.css"
export function LinksPage(){
    let [messageList,setMessageList]:[any[],Function]=useState([])
    const pageInnerList=[
        {
            "title": "湛天伦",
            "src": "https://www.guitu18.com/usr/plugins/Handsome/assets/image/nopic.jpg",
            "desc": "种一棵树最好的时间是十年前，其次是现在",
            "target": "https://zhantianlun.com/"
        },
        {
            "title": "LZQ'blog",
            "src": "https://www.guitu18.com/usr/plugins/Handsome/assets/image/nopic.jpg",
            "desc": "林梓强的个人博客",
            "target": "http://www.linziqiang.com/"
        },
        {
            "title": "陆陆大顺",
            "src": "https://blog.shunnet.top/accessories/images/shunlia.png",
            "desc": "一路走 一路失去 也一路拥有",
            "target": "https://www.shunnet.top/"
        },
        {
            "title": "魏超个人博客",
            "src": "https://weichaooqx.com:3301/figure/blog-images/logo.png",
            "desc": "魏超个人博客--个性格开朗,幽默的90后草根站长，潜心研究前端技术",
            "target": "https://weichaooqx.com/"
        },
        {
            "title": "大胡子博客",
            "src": "https://photo.jakehu.cn/favicon.png",
            "desc": "记录你我，分享精彩。",
            "target": "https://www.jakehu.cn/"
        },
        {
            "title": "之瑶（天仙佑之，洁若池瑶）",
            "src": "http://www.sofiazsx.cn/logo.png",
            "desc": "希望我们在这里都能有所收获，成长之路，与君共勉",
            "target": "http://www.sofiazsx.cn/"
        },
        {
            "title": "RollApi",
            "src": "https://mxnzp.com/images/avatar/10000.jpg",
            "desc": "穆仙念的个人网站~",
            "target": "https://www.mxnzp.com/"
        },
        {
            "title": "郭鹏真PattenKuo的博客",
            "src": "https://guopengzhen.com/img/avater.jpg",
            "desc": "Thoughts, stories and ideas of Patten Kuo .",
            "target": "https://guopengzhen.com/"
        },
        {
            "title": "风在哪",
            "src": "https://gitee.com/blog-map-bed/first-bed/raw/master/img/myavatar.jpg",
            "desc": "如果你不知道失败是什么，那么你永远不会获得成功",
            "target": "https://www.wygandwdn.cn/"
        }
    ]
    const recommend=[
        {
            "title": "云淡风轻",
            "src": "https://www.guitu18.com/usr/plugins/Handsome/assets/image/nopic.jpg",
            "desc": "一个神秘的人",
            "target": "https://ioliu.cn/"
        },
        {
            "title": "萌卜兔's",
            "src": "https://racns.com/usr/images/favicon.ico",
            "desc": "萌卜兔博客，兔子爱上胡萝卜",
            "target": "https://racns.com/"
        },
        {
            "title": "十年之约",
            "src": "https://www.foreverblog.cn/favicon.ico",
            "desc": "把博客从爱好变成一种习惯，坚持10年，是一项很有意义的活动，我们希望更多的博主加入！",
            "target": "https://www.foreverblog.cn/"
        },
        {
            "title": "逆时针博客",
            "src": "https://www.guitu18.com/usr/plugins/Handsome/assets/image/nopic.jpg",
            "desc": "拾起生活中余下的时光",
            "target": "https://www.mydes.top/"
        }
    ]
    const above=[
        {
            "title": "硅云",
            "src": "https://cdn.vpsor.cn/favicon.ico",
            "desc": "云计算服务提供商",
            "target": "https://www.vpsor.cn/"
        },
        {
            "title": "Python教程",
            "src": "https://www.guitu18.com/usr/plugins/Handsome/assets/image/nopic.jpg",
            "desc": "通俗易懂、深入浅出的python教程",
            "target": "http://www.python66.com/"
        },
        {
            "title": "Easy Blog",
            "src": "https://www.guitu18.com/usr/plugins/Handsome/assets/image/nopic.jpg",
            "desc": "记录生活与代码问题的个人博客",
            "target": "https://www.haowenbo.com/"
        },
        {
            "title": "十年之约",
            "src": "https://www.foreverblog.cn/favicon.ico",
            "desc": "一个记录、展示独立博客的平台",
            "target": "https://www.foreverblog.cn/"
        }
    ]
    return <>
        <Public.Tabs>
            <Public.TabsItem title="申请友链">
                <div style={{width:'calc(100% - 30px)',height:'auto',padding:'15px',background:'var(--bgPure-1)'}}>
                    <Public.Comment background='var(--bg-2)' style={{borderTop:'5px solid var(--bg-1)',backgroundColor:'var(--bg-1)'}}>
                        <div className="title" style={{fontWeight:'bold',marginBottom:'8px',marginTop:'10px',fontSize:'15px'}}>本站链接形式</div>
                        <p style={{color:'var(--colorText-4)',textAlign:'left',marginLeft:'10px',lineHeight:'2em'}}>网站名称：夜月归途的博客<br/>
                        网站链接：xxxxx<br/>
                        网站图标：React<br/>
                        网站描述：洒洒水</p>
                    </Public.Comment>
                </div>
            </Public.TabsItem>
            <Public.TabsItem  title="内页链接" style={{width:'100%'}}>
                <div className="linkBordContainer">
                    {
                        pageInnerList.map(item=>{
                            return <a href={item.target} className="linkBord" target="_blank">
                                        <div className="linkAvatar">
                                            <img src={item.src} style={{width:'100%',height:'100%',objectFit:'contain'}}/>
                                        </div>
                                        <div className="linkContent">
                                            <div className="linkTitle">{item.title}</div>
                                            <div className="linkDesc">{item.desc}</div>
                                        </div>
                                    </a>
                        })
                    }
                    
                </div>
            </Public.TabsItem>
            <Public.TabsItem  title="推荐链接">
                <div className="linkBordContainer">
                    {
                        recommend.map(item=>{
                            return <a href={item.target} className="linkBord" target="_blank">
                                        <div className="linkAvatar">
                                            <img src={item.src} style={{width:'100%',height:'100%',objectFit:'contain'}}/>
                                        </div>
                                        <div className="linkContent">
                                            <div className="linkTitle">{item.title}</div>
                                            <div className="linkDesc">{item.desc}</div>
                                        </div>
                                    </a>
                        })
                    }
                    
                </div>
            </Public.TabsItem>
            <Public.TabsItem  title="全站链接">
                <div className="linkBordContainer">
                    {
                        above.map(item=>{
                            return <a href={item.target} className="linkBord" target="_blank">
                                        <div className="linkAvatar">
                                            <img src={item.src} style={{width:'100%',height:'100%',objectFit:'contain'}}/>
                                        </div>
                                        <div className="linkContent">
                                            <div className="linkTitle">{item.title}</div>
                                            <div className="linkDesc">{item.desc}</div>
                                        </div>
                                    </a>
                        })
                    }
                    
                </div>
            </Public.TabsItem>
        </Public.Tabs>
    </>
}